<!DOCTYPE html>
<html>
<%@page pageEncoding="UTF-8" %>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>category</title>

		<!--导入css连接-->
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />

		<link rel="stylesheet" type="text/css" href="../css/style.css" />

		<!--导入js连接-->
		<script src="../js/jquery-2.1.1.js"></script>

		<script src="../js/bootstrap.min.js"></script>

		<style>
			.col-lg-12 span {
				padding-left: 15px;
			}
		</style>

	</head>

	<body>

		<!--顶部-->
		<nav id="top" class="collapse navbar-collapse">
			<div class="container">
				<div class="row">
					<div class="col-xs-6">
						<ul class="top-link" style="float: left;">
							<li>
								<a href="index.jsp">首页</a>
							</li>
							<li>
								<a href="#">华为官网</a>
							</li>
							<li>
								<a href="#">荣耀官网</a>
							</li>
							<li>
								<a href="#">花粉俱乐部</a>
							</li>
							<li>
								<a href="goods.jsp">购物商城</a>
							</li>
							<li>
								<a href="category.jsp">更多精彩</a>
							</li>
						</ul>
					</div>
					<div class="col-xs-6">
						<ul class="top-link">
							<li>
								<a href="login.jsp">登录</a>
							</li>
							<li>
								<a href="register.jsp">注册</a>
							</li>
							<li>
								<a href="order.jsp">我的订单</a>
							</li>
							<li>
								<a href="#">客户服务</a>
							</li>
							<li>
								<a href="#">网站导航</a>
							</li>
							<li>
								<a href="cart.jsp">购物车</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</nav>

		<!--导航-->
		<nav id="menu" class="navbar">
			<div class="container">
				<div class="navbar-header"><span id="heading" class="visible-xs">展示</span>
					<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
				</div>
				<div class="collapse navbar-collapse navbar-ex1-collapse">
					<ul class="nav navbar-nav">
						<li>
							<a href="goods.jsp">荣耀商城</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">手机</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">笔记本&平板</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">智能穿戴&VR</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">智能家居&智慧屏</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">热销配件</a>
						</li>

					</ul>
				</div>
			</div>
		</nav>

		<!--下面展示-->
		<div id="page-content" class="single-page">
			<div class="container">

				<div class="row">
					<div class="col-lg-12">

						<p>首页 > 手机</p>
						<hr/>
						<span>手机分类：</span><span><a href="#">手机</a></span>
						<hr/>
						<span>价格区间：</span><span><a href="#">0-999</a></span><span><a href="#">1000-1999</a></span><span><a href="#">2000-3999</a></span>
						<hr/>
						<span>屏幕尺寸：</span><span><a href="#">5.5-6.0英寸</a></span><span><a href="#">6.0-6.5英寸</a></span><span><a href="#">6.5英寸以上</a></span>
						<hr/>
						<span>更多选项：</span><span><a href="#">运行内</a>存</span><span><a href="#">存储容量</a></span><span><a href="#">上市时间</a></span>
						<hr/>

					</div>

				</div>

				<div class="row">

					<div id="main-content" class="col-md-12">
						<div class="row">
							<div class="col-md-12">
								<div class="products">
									<div class="col-lg-3 col-md-2 col-xs-12" >
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs1.png" /></a>
											</div>
											<p>【订金预订省50】HUAWEI nova 6</p>
											<p style="color: red;">¥3799.00</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-2 col-xs-12" >
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs2.png" /></a>
											</div>
											<p>HUAWEI nova 6 SE</p>
											<p style="color: red;">¥2199.00</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-2 col-xs-12">
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs3.png" /></a>
											</div>
											<p>HUAWEI Mate X 5G</p>
											<p style="color: red;">¥16999.00</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-2 col-xs-12">
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs4.png" /></a>
											</div>
											<p>HUAWEI Mate 30 RS</p>
											<p style="color: red;">¥12999.00</p>
										</div>
									</div>

								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-md-12">
								<div class="products">
									<div class="col-lg-3 col-md-2 col-xs-12">
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs5.png" /></a>
											</div>
											<p>HUAWEI Mate 30 Pro</p>
											<p style="color: red;">¥6899.00</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-2 col-xs-12">
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs6.png" /></a>
											</div>
											<p>荣耀V30 PRO 双模5G</p>
											<p style="color: red;">¥3899.00</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-2 col-xs-12">
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs7.png" /></a>
											</div>
											<p>HUAWEI Mate 30 5G</p>
											<p style="color: red;">¥4999.00</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-2 col-xs-12">
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs8.png" /></a>
											</div>
											<p>荣耀V30 双模5G</p>
											<p style="color: red;">¥3299.00</p>
										</div>
									</div>

								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-md-12">
								<div class="products">
									<div class="col-lg-3 col-md-2 col-xs-12">
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs9.png" /></a>
											</div>
											<p>【热销爆品】HUAWEI nova 5z</p>
											<p style="color: red;">¥1499.00</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-2 col-xs-12">
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs10.png" /></a>
											</div>
											<p>荣耀畅玩8C</p>
											<p style="color: red;">¥799.00</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-2 col-xs-12">
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs11.png" /></a>
											</div>
											<p>华为畅享10</p>
											<p style="color: red;">¥1399.00</p>
										</div>
									</div>
									<div class="col-lg-3 col-md-2 col-xs-12">
										<div class="product" style="border: 1px solid gainsboro;">
											<div class="image">
												<a href="product.jsp"><img src="../img/zs12.png" /></a>
											</div>
											<p>荣耀20青春版</p>
											<p style="color: red;">¥1099.00</p>
										</div>
									</div>

								</div>
							</div>
						</div>

						<!--分页-->
						<div class="row text-center">
							<ul class="pagination">
								<li class="active">
									<a href="#">1</a>
								</li>
								<li>
									<a href="#">2</a>
								</li>
								<li>
									<a href="#">3</a>
								</li>
								<li>
									<a href="#">4</a>
								</li>
								<li>
									<a href="#">5</a>
								</li>
							</ul>
						</div>
					</div>

				</div>
			</div>
		</div>

		<!--脚步-->
		<footer>
			<div class="container">
				<div class="wrap-footer">
					<div class="row">

						<div class="col-md-3 col-footer footer-1">
							<div class="heading">
								<h4>关于荣耀</h4></div>
							<ul>
								<li>
									<a href="#">荣耀锐影像</a>
								</li>
								<li>
									<a href="#">荣耀大事记</a>
								</li>
								<li>
									<a href="#">荣耀人物</a>
								</li>
								<li>
									<a href="#">品牌问题</a>
								</li>
								<li>
									<a href="#">新闻中心</a>
								</li>
							</ul>
						</div>
						<div class="col-md-3 col-footer footer-2">
							<div class="heading">
								<h4>产品</h4></div>
							<ul>
								<li>
									<a href="#">手机</a>
								</li>
								<li>
									<a href="#">荣耀智慧屏</a>
								</li>
								<li>
									<a href="#">笔记本&平板</a>
								</li>
								<li>
									<a href="#">穿戴设备</a>
								</li>
								<li>
									<a href="#">智能家庭</a>
								</li>
								<li>
									<a href="#">配件</a>
								</li>
							</ul>
						</div>
						<div class="col-md-3 col-footer footer-3">
							<div class="heading">
								<h4>快速链接</h4></div>
							<ul>
								<li>
									<a href="#">物料下载</a>
								</li>
								<li>
									<a href="#">移动端官网</a>
								</li>
								<li>
									<a href="#">华为商城</a>
								</li>
								<li>
									<a href="#">华为开发者联盟</a>
								</li>
								<li>
									<a href="#">华为云</a>
								</li>
							</ul>
						</div>

						<div class="col-md-3 col-footer footer-4">
							<div class="heading">
								<h4>联系我们</h4></div>
							<ul>
								<li><span class="glyphicon glyphicon-home"></span>California, United States 3000009</li>
								<li><span class="glyphicon glyphicon-earphone"></span>950800</li>
								<li><span class="glyphicon glyphicon-envelope"></span>infor@yoursite.com</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div class="copyright">
				<div class="container">
					<div class="row">

						<span>法律声明  |   隐私声明  |   免责条款  |   关于cookies</span><br />
						<span>Copyright © 2011-2019 华为终端有限公司 版权所有 保留一切权利  |  苏公网安备 32011402010006号 粤ICP备19015064号</span>

					</div>
				</div>
			</div>
		</footer>

	</body>

</html>